
/**
 * A list of the participants.
 * @type {Array.<gapi.hangout.Participant>}
 * @private
 */
var participants_ = null;

var updateParticipants = function() {

  var container = document.getElementById("hoge");
  while ( container.firstChild ) container.removeChild( container.firstChild );

  for(var i = 0; i < participants_.length ; i++) {
    var participant = participants_[i];

    var element = document.createElement("div");
    
    var newName = document.createTextNode(participant.person.displayName);
    element.appendChild(newName);

    var newImage = document.createElement("image");
    newImage.src = participant.person.image.url;
    element.appendChild(newImage);

    var newVolume = document.createElement("div");
    newVolume.id = participant.id + "-volume";
    element.appendChild(newVolume);

    container.appendChild(element);
  }
};

var onParticipantsChange = function(eventObj) {
  participants_ = eventObj.participants;
  updateParticipants();
};

gapi.hangout.onParticipantsChanged.add(onParticipantsChange);


var onParticipantsAdd = function(eventObj) {
  var addedPersons = eventObj.enabledParticipants;
  onPersonsAdded(addedPersons);
};

gapi.hangout.onParticipantsAdded.add(onParticipantsChange);



var onVolumeChange = function(volChangeEvent) {

  var volumes = volChangeEvent.volumes;

  for (var i = 0, iLen = participants_.length; i < iLen; ++i) {
    var hangoutId = participants_[i].id;
    var level = volumes[hangoutId] || 0;

    var newVolume = document.getElementById(hangoutId + "-volume");
    newVolume.innerHTML = level;
  }
};

gapi.hangout.av.onVolumesChanged.add(onVolumeChange);



var startMyApp = function() {
  participants_ = gapi.hangout.getEnabledParticipants();
  updateParticipants();
};

gapi.hangout.onApiReady.add(function(eventObj){
  if (eventObj.isApiReady) {
    startMyApp();
  }
});


